<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入 Bootstrap -->
<link href="../../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
    h1{
        text-align: center;
    }
    #checkAll, .check {
        width: 20px;
        height: 20px;
    }
    #add_btn {
        background: #009688;
        height: 43px;
        width: 82px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
        margin-right: 10px;
        margin-left: 20px;
    }
    #del_btn {
        background: #e4606d;
        height: 43px;
        width: 82px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
        margin-top: 10px;
        margin-left: 20px;
    }
    /*搜索框1*/
    .bar1 {
        width: 455px;
        height: 40px;
        display: inline-block;
        margin-left: 20px;
    }

    #CompanyName,#Phone {
        width: 285px;
        height: 40px;
        color: #0f6674;
        font-weight: bold;
        border-radius: 7px;
    }

    #sous_btn {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-right: 56px;
    }

    #sous_form {
        width: 900px;
    }

    .bar1 input {
        border: 2px solid #7BA7AB;
        border-radius: 5px;
        background: #F9F0DA;
        color: #9E9C9C;
        outline:none;
    }

    .bar1 button {
        top: 0;
        right: 0;
        background: #7BA7AB;
        border-radius: 0 5px 5px 0;
    }

    .bar1 button:before {
        content: "\f002";
        font-family: FontAwesome;
        font-size: 16px;
        color: #F9F0DA;
    }
    label {
        font-weight: bold;
        font-size: 20px;
    }
    #tr_text td{
        font-weight: bold;
    }
    #price-tab{
        margin-top: 15px;
        background: #f8f9fa;
    }
    #upd_btn {
        background: orange;
        height: 38px;
        width: 72px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
    }
    #export_btn{
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
    }
    #upd_btn2{
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
    }
    /*滚动条样式 */
    .order {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }
    #daoHang_div{
        background-color: rgb(248,244,240);
    }
    #daoHang2{
        font-size: 18px;
        color: #86cfda;
    }
    #daoHang_div button{
        margin-left: 10px;
    }
    #daoHang_div a{
        margin-left: 10px;
    }
</style>
<body>
<div id="orderFormContent">
    <div class="container-fluid">
        <!--   row   一行  -->
        <div class="row" id="daoHang_div">

            <button class="btn btn-info" @click="batchPass()">批量通过</button>
            <button class="btn btn-success" @click="batchNoPass()">批量未通过</button>
            <a class="btn btn-secondary" href="permission.html">返回</a>
        </div>
    </div>
    <div class="container-fluid">
        <!--   row   一行  -->
        <div class="row">
            <div class="col-xl-12" id="top_div">
                <div class="search bar1">
                    <form id="sous_form">
                        <label>售货订单日期：</label>
                        <input id="CompanyName" name="CompanyName" type="text" placeholder="按货物名称搜索...">
                        <button id="sous_btn" type="button"></button>
                    </form>
                </div>

                <button type="button" id="add_btn" @click="add">
                    添加
                </button>
                <button type="button" id="del_btn" @click="del">删除</button>
            </div>
        </div>
    </div>
    <table id="price-tab" class="table table-hover order">
        <tr id="tr_text">
            <td><input type="checkbox" id="checkAll" @click="allCheck"></td>
            <td>售货订单编号</td>
            <td>售货订单日期</td>
            <td>取货日期</td>
            <td>取货地点</td>
            <td>收款方式编号</td>
            <td>收款最迟日期</td>
            <td>货币种类编号</td>
            <td>预付金额</td>
            <td>货物总额</td>
            <td>税率总额</td>
            <td>赊欠金额</td>
            <td>运调费用</td>
            <td>业务员编号</td>
            <td>财务员编号</td>
            <td>审核</td>
            <td>审核结果</td>
            <td>收款收据</td>
            <td>客户信息</td>
            <td>货物种类数</td>
            <td>总净高额</td>
            <td>订货数量</td>
            <td>订货单价</td>
            <td>物质明细表</td>
            <td>物质价格表</td>
            <td>物质净高价（订货单价 - 物质价格）</td>
        </tr>
        <!--  page.list  page类的list  -->
        <tr v-for="orderForm in page.list" id="tr_text2">
            <td><input @click="isCheckAll" type="checkbox" :value="orderForm.xhOrderNo" class="check"></td>
            <td>{{orderForm.xhOrderNo}}</td>
            <td>{{orderForm.xhOrderDate}}</td>
            <td>{{orderForm.gdDate}}</td>
            <td >{{orderForm.gdAddress}}</td>
            <td v-if="orderForm.revCurrencyModeNo==1">现金</td>
            <td v-if="orderForm.revCurrencyModeNo==2">微信</td>
            <td v-if="orderForm.revCurrencyModeNo==3">支付宝</td>
            <td v-if="orderForm.revCurrencyModeNo==4">银行卡</td>
            <td>{{orderForm.revCurrencyLastDate}}</td>
            <td v-if="orderForm.currencyNo==1">人民币</td>
            <td v-if="orderForm.currencyNo==2">美元</td>
            <td v-if="orderForm.currencyNo==3">日元</td>
            <td v-if="orderForm.currencyNo==4">韩元</td>
            <td>{{orderForm.prePayCurrency}}</td>
            <td>{{orderForm.goodsSumCurrency}}</td>
            <td>{{orderForm.taxSumCurrency}}</td>
            <td>{{orderForm.creditCurrency}}</td>
            <td>{{orderForm.addtionalCurrency}}</td>
            <td>{{orderForm.traderNo}}</td>
            <td>{{orderForm.treasurerNo}}</td>
            <td v-if="orderForm.isCheck==3">审核中</td>
            <td>{{orderForm.checkRes}}</td>
            <td>{{orderForm.recCurrencyRcept==1?'已收款':'未收款'}}</td>
            <td>{{orderForm.customerNo}}</td>
            <td>{{orderForm.goodsClassCounts}}</td>
            <td>{{orderForm.sumProfitCurrency}}</td>
            <td>{{orderForm.itemsQty}}</td>
            <td>{{orderForm.itemsPrice}}</td>
            <td>{{orderForm.itemsInfoNo}}</td>
            <td>{{orderForm.itemsNo}}</td>
            <td>{{orderForm.itemsProfitPrice}}</td>

            <td>
                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" style="width: 70px" @click="pass(Of)">通过</button>
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" style="width: 70px" @click="noPass(Of)">未通过</button>
            </td>
        </tr>

    </table>
    <!--无序列表 翻页-->
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="javascript:void(0);" @click="toPage(1)">首页</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);" v-if="page.pageNow>1"
                                 @click="toPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
        <li class="page-item active"><a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);" v-if="page.pageNow<page.pageTotal"
                                 @click="toPage(page.pageNow+1)">{{page.pageNow+1}}</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);" @click="toPage(page.pageTotal)">尾页</a>
        </li>
    </ul>
</div>

<script src="../../style/jquery-3.3.1.js"></script>
<script src="../../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
<script src="../../style/vue.js"></script>
<script src="../../my1.1.js"></script>
<script>
    $(function () {
        let page = selOrderFormTable(1);
        let app = new Vue({
            el: '#orderFormContent',
            data: {
                page: page
            },
            methods: {
                updOrderForm: function (orderForm) {
                    //修改
                    $.ajax({
                        type: "post",
                        url: "../../OrderForm/updOrderForm",
                        dataType: "json",
                        data: orderForm,
                        success: function () {
                            location.href='orderForm_list.html';
                        }
                    });
                },
                allCheck: function () {
                    eventHub.$emit('allCheck', null);
                },
                isCheckAll: function () {
                    eventHub.$emit('isCheckAll', null);
                },
                toPage: function (pageNow) {//当前页
                    this.page = selOrderFormTable(pageNow);
                },
                add:function (){
                    location.href="orderForm_add.html";
                },
                del: function () {
                    let ids = "";
                    // 获取复选框中的值 id值 使用类选择器each()遍历方法
                    $(".check").each(function () {
                        // 对所有符合该选择器的元素进行操作。this 复选框.value
                        // 判断该复选框是否选中
                        if (this.checked) {
                            ids += this.value + ",";
                        }

                    })
                    // ajax把拼接的id传入到后台
                    $.ajax({
                        type: "post",
                        url: "../../OrderForm/delOrderFormAll",
                        data: {ids: ids},
                        dataType: "json",
                        success: function (data) {
                            alert(data.message);
                            location.href="orderForm_list.html";
                        }
                    })

                },
                //批量通过
                batchPass: function () {
                    let ids = "";
                    // 获取复选框中的值 id值 使用类选择器each()遍历方法
                    $(".check").each(function () {
                        // 对所有符合该选择器的元素进行操作。 this 复选框.value
                        // 判断该复选框是否选中
                        if (this.checked) {
                            ids += this.value + ",";
                        }
                    })
                    // ajax把拼接的id传入到后台
                    $.ajax({
                        type: "post",
                        url: "../../OrderForm/batchPass",
                        data: {ids: ids},
                        dataType: "json",
                        success: function (data) {
                            // 删除完成后重新查询第一页
                            alert(data.message)
                            window.location.reload();
                        }
                    });
                },
                //批量未通过
                batchNoPass: function () {
                    let ids = "";
                    // 获取复选框中的值 id值 使用类选择器each()遍历方法
                    $(".check").each(function () {
                        // 对所有符合该选择器的元素进行操作。 this 复选框.value
                        // 判断该复选框是否选中
                        if (this.checked) {
                            ids += this.value + ",";
                        }
                    })
                    // ajax把拼接的id传入到后台
                    $.ajax({
                        type: "post",
                        url: "../../OrderForm/batchNoPass",
                        data: {ids: ids},
                        dataType: "json",
                        success: function (data) {
                            // 删除完成后重新查询第一页
                            alert(data.message)
                            window.location.reload();
                        }
                    });
                },
                //通过方法 可携带备注信息
                pass: function (Of) {
                    $.ajax({
                        type: "post",
                        url: "../../OrderForm/pass",
                        data: Of,
                        dataType: "json",
                        success: function (json) {
                            alert(json.message);
                            window.location.reload();
                        }
                    });
                },
                //未通过方法 可携带备注信息
                noPass: function (Of) {
                    $.ajax({
                        type: "post",
                        url: "../../OrderForm/noPass",
                        data: Of,
                        dataType: "json",
                        success: function (data) {
                            alert(data.message);
                            window.location.reload();
                        }
                    });
                }
            }
        })
    })
    function selOrderFormTable(pageNow) {
        let page;//声明，然后在上边调用
        $.ajax({
            type: "post",
            data: {pageNow: pageNow},
            url: "../../OrderForm/selOrderFormForTreasurer",
            async: false,
            dataType: "json",
            success: function (json) {
                page = json; //把json对象赋值给data,然后返回
            }
        })
        return page;
    }
</script>
</body>
</html>